<style scoped>
.div_main{
  position: relative !important;
  background: transparent;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-y: scroll;
  height:calc(100% - 40px);
  /*border: 1px red solid;*/
}
.div_main::-webkit-scrollbar { width: 0; height: 0; }

.m_div_card{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;

  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);

  color: #505968;
}
.m_div_card_title{
  width: 100%;
  padding-left: 10px;
  margin-top: 10px;
  font-size: 16px;
}
.m_div_card_content{
  width: 100%;
  margin-top: 5px;
  padding-left: 20px;
  padding-bottom: 10px;
  font-size: 14px;
  color: #505968;
  /*border: 1px red solid;*/
}

.m_div_center_card{
  position: absolute;
  top: 50px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 60px);
  overflow: scroll;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);
}
.m_div_center_card::-webkit-scrollbar { width: 0; height: 0; }
</style>
<template>
  <div class="div_main">
    <div v-show="!itemShow" v-loading="loading">
      <div v-for="item in dataList" class="m_div_card" @click="showItem(item)">
        <div class="m_div_card_title">
          <div style="float: left;"><van-image width="20" src="/images/mob-icon-notice.svg" /></div>
          <div style="float: left;margin-top: -2px;padding-left: 14px;">通知公告</div>
          <div style="float: left;padding-left: 14px;margin-top: 1px;color: #9f9f9f;">{{item.publish_time}}</div>
        </div>
        <div class="m_div_card_content">
          {{item.title}}
        </div>
      </div>
    </div>

    <div v-show="itemShow"
         style="position: relative;left:0px;top:0px;font-size: 24px;color: #ffffff;" >
      <van-icon name="arrow-left" style="float: left;" @click="itemShow=false" />
    </div>
    <div v-show="itemShow" class="m_div_center_card">
      <elm-mob-new-page v-if="itemShow" :data_id="itemData.id" page_type="tzgg"></elm-mob-new-page>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,

      dataList:[],

      itemShow:false,
      itemData:{},
    }
  },
  mounted() {
    this.v_getData();
  },
  methods: {
    async v_getData(){
      this.loading = true;
      this.dataList = [];
      let dataList = await elm.post('/business/my/GetNoticeData', {});
      for(let i=0;i<dataList.length;i++){
        let item = dataList[i];
        if(!this.em(item.title) && item.title.length>20){item.title = item.title.substring(0,19)+'…';}
        if(!this.em(item.publish_time) && item.publish_time.length>10){item.publish_time = item.publish_time.substring(0,10);}
      }
      this.dataList = dataList;
      this.loading = false;
    },
    showItem:function(data){
      this.itemData = data;
      this.itemShow = true;
    },

    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },

  }
}
</script>
